
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <a-input type="text" disabled v-model:value="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">字段标识</div>
      <div class="w-3/4">
        <a-input type="text" placeholder="用于$('')查询" v-model:value.trim="current.selector" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.describe" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">按钮名称</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.componentProps.name" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14 font-bold">事件配置</div>
    </div>
    <div class="flex items-center px-10">
      <div class="w-1/4 text-14">onClick</div>
      <div class="w-3/4">
        <a-select
          style="width: 100%"
          mode="multiple"
          allowClear
          v-model:value="current.componentProps.onClickEvents"
          class="m-2"
          placeholder="Select"
        >
          <a-select-option
            v-for="item in lowCode.eventCollection"
            :key="item.code"
            :value="item.code"
          >{{ item.describe }}</a-select-option>
        </a-select>
      </div>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
import type { Component } from "@/components/low-code/core/component";

export default defineComponent({
  name: "buttonSetting",
  props: ["current"],
  setup(props) {
    const component = props.current as Component;
    let lowCode = component.getLowCodeInstance();
    return { lowCode };
  },
});
</script>

<style  scoped>
</style>
